﻿<div class="album-container" data-bind="Example01">
    <style>
        .album-container {
            display: flex;
            display: -webkit-flex;
            width: 100%;
            height: 100%;
            background: -webkit-radial-gradient(#490338 10%, #000);
            perspective: 9rem;
            overflow: hidden;
        }

        #album {
            position: relative;
            width: 1.33rem;
            height: 2rem;
            margin: auto;
            transform-style: preserve-3d;  /*子元素以3d效果展示*/
            transform: rotateX(-20deg);    /*初始向下倾斜20deg*/
        }

        #album img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 反射倒影 距离下面5px  */
            -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5));
        }

        /*p元素就是底部中间那个圆形区域，类似于一个舞台效果，album>img 初始位置就在舞台正中间*/
        #album p {
            position: absolute;
            left: calc(1.33rem / 2 - 8rem / 2);
            top: calc(2rem / 2 - 8rem / 2);
            width: 8rem;
            height: 8rem;
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(1rem) rotateX(90deg);
            border-radius: 50%;
        }
    </style>

    <div id="album">
        <img src="app/album/example01/images/1.jpg" alt="">
        <img src="app/album/example01/images/2.jpg" alt="">
        <img src="app/album/example01/images/3.jpg" alt="">
        <img src="app/album/example01/images/4.jpg" alt="">
        <img src="app/album/example01/images/5.jpg" alt="">
        <img src="app/album/example01/images/6.jpg" alt="">
        <img src="app/album/example01/images/7.jpg" alt="">
        <img src="app/album/example01/images/8.jpg" alt="">
        <img src="app/album/example01/images/9.jpg" alt="">
        <img src="app/album/example01/images/10.jpg" alt="">
        <p></p>
    </div>
</div>
